<template>
<div class="bookranklistPane" >
    <div class="chartInfo" v-for="(chart,index) in charts" :key="index" >
      <div class="chartimg" > <img :src="getImgUrl(chart.bimg)" style="width: 85px;height: 105px"/></div>
      <div class="charttxt">
        <span class="chartNo" style="width: 10px" >{{chart.no}}.</span>
      <span class="chartName" >{{chart.name}}</span>
      <span class="chartName" style="width: 200px"> <a  target="_blank"
                                                        href="https://baidu.com"
                                                        class="text-decoration-none">作者：{{chart.bauthor}}</a></span>
      <span class="chartName" style="width: 100%">简介：{{chart.bdescribe}}</span>
<!--      <span class="chartValue" style="width: 60px">{{chart.value}}</span>-->
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../../axios/api"
export default {
  name: "bookranklist",
  data(){
    return{
      charts:[],

    }
  },
  methods:{
    getImgUrl: function (imgsrc) {
      return  this.$store.state.host + "/upload/images/books/" + imgsrc;
    },
    setDataFromAxios: function () {
      api.setDataFromAxios( "/api/chartController/charts/booksTop3byorderdetails", null, "get")
        .then(dto => {
          console.log(dto);
          this.charts = dto.tList;
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

    },
  },
  created() {
    let that = this;
    setInterval(function (){
      that.setDataFromAxios();
    },5000)

  },
}
</script>

<style scoped>
html{font-size:62.5%;}
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }
a{ text-decoration:none; }
a:hover{color: #0099ff;}/* 鼠标经过悬停字体颜色 */
::-webkit-scrollbar {width: 5px;height: 5px;background-color: rgba(240, 240, 240, 1);}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(240, 240, 240, .5);border-radius: 10px;background-color: rgba(240, 240, 240, .5);}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);background-color: #b3b3b3c7;}
::-webkit-scrollbar-corner {background: #d4e0e0;}
.bookranklistPane{background: #fff;background: white;  border-radius:5px ; border: 1px solid  #eee; height: px; width: 100%;  }
.chartInfo{width: 100%; height: 115px; text-align: left; padding: 5px 0 0 20px; }
.chartimg{width: 85px; height: 105px;float: left;}
.charttxt{width:75%; height: 105px;float:left; padding-left: 5px;}
.charttxt span{display: inline-block; }
.charttxt > span:nth-child(1){font-size: 0.8rem;  }
.charttxt > span:nth-child(2){width:180px;line-height: 25px;font-size: 0.8rem; color:black; font-family:微软雅黑 ; }
.charttxt > span:nth-child(3){display:block;line-height:20px ; font-size: 0.7rem; font-weight: 500; font-family: "微软雅黑 Light" ;padding-left: 1px;}
.charttxt > span:nth-child(4){display:block; font-size: 0.75rem; font-family: "微软雅黑"; }

/*.chartInfo span{}*/
/*.chartInfo span span:nth-child(3){display: inline-block;}*/
</style>
